<!-- 供应商费用即将结算 -->
<template>
  <a-modal
    :visible="visible"
    @cancel="onClose"
    :title="pageTlt"
    :mask-closable="false"
    :align-center="false"
    class="modal-dialog-wrapper"
    top="30px"
    width="85vw"
    okText="确认"
  >
    <div class="gysfytips-wrap" style="max-height: 85vh">
      <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />
      <table-index :table="table" :rowKey="`id`" @loadData="loadData">
        <template #contactsName="{ record }">
          <div class="car-msg">
            <div class="car-msg-left">
              <div class="col-text">{{ record.contactsName || '-' }} </div>
              <div class="col-text"> {{ record.contactsMobile || '-' }} </div>
            </div>
          </div>
        </template>
        <template #operate="{ record }">
          <!-- 业务类型，保养1，维修2，年检3 -->
          <view v-if="record.refType == 1 || record.refType == 2 || record.refType == 3">
            <view v-if="usePermission('svms:finance:reconciliation:maintenance-fee')">
              <!-- 运维对账 -->
              <a
                v-permission="'svms:finance:reconciliation:maintenance-fee'"
                class="operate-button"
                type="text"
                size="small"
                @click="onhandle(4, record)"
              >
                前往处理
              </a>
            </view>
            <view v-else>
              <a
                v-if="record.refType === 1"
                v-permission="'svms:asstes:car:car-repair.detail'"
                class="operate-button"
                type="text"
                size="small"
                @click="onhandle(1, record)"
              >
                前往处理
              </a>
              <a
                v-else-if="record.refType === 2"
                v-permission="'svms:asstes:car:car-maintenance.detail'"
                class="operate-button"
                type="text"
                size="small"
                @click="onhandle(2, record)"
              >
                前往处理
              </a>
              <a
                v-else-if="record.refType === 3"
                v-permission="'svms:asstes:operation:car-inspect.detail'"
                class="operate-button"
                type="text"
                size="small"
                @click="onhandle(3, record)"
              >
                前往处理
              </a>
            </view>
          </view>
          <view v-else>
            <!-- 车辆购置费对账 -->
            <view v-if="usePermission('svms:finance:reconciliation:car-purchase')">
              <a
                v-permission="'svms:finance:reconciliation:car-purchase'"
                class="operate-button"
                type="text"
                size="small"
                @click="onhandle(5, record)"
              >
                前往处理
              </a>
            </view>
            <!-- 费用信息 -->
            <view v-else>
              <a
                v-permission="'svms:asstes:car:car-model.detail'"
                class="operate-button"
                type="text"
                size="small"
                @click="onhandle(6, record)"
              >
                前往处理
              </a>
            </view>
          </view>
        </template>
      </table-index>
    </div>
    <template #footer>
      <a-button @click="onClose">关闭</a-button>
    </template>
  </a-modal>
</template>

<script setup name="txfytips">
  import { ref, reactive, computed } from 'vue'
  import { getSupplierLillList } from '@/api/workplace.js'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import useNavigate from '@/hooks/useNavigate'
  import { usePermission } from '@/hooks/usePermission'
  const { navigateTo } = useNavigate()
  //查询条件
  let queryParam = reactive({})
  const searchList = computed(() => {
    return [
      {
        label: '供应商',
        prop: 'supplierId',
        type: 'remote-select',
        attrs: {
          type: 'supplier_list',
          popupContainer: '.gysfytips-wrap',
        },
      },
      { label: '业务单信息', prop: 'refCode', type: 'a-input' },
      {
        label: '业务单类型',
        prop: 'refType',
        type: 'remote-select',
        attrs: {
          type: 'order_list',
          popupContainer: '.gysfytips-wrap',
        },
      },
    ]
  })
  // 待处理 - table 配置
  const table = useTable({
    tableHeight: 'calc(100vh - 350px)',
    columns: [
      { title: '业务单信息', dataIndex: 'refCode', width: 240 },
      { title: '业务单类型', dataIndex: 'refTypeName', width: 100 },
      { title: '待结金额', dataIndex: 'amount', unit: '元', width: 80 },
      { title: '应结日期', dataIndex: 'settlementDate', width: 170 },
      { title: '供应商', dataIndex: 'supplierName', width: 100 },
      { title: '供应商联系人', dataIndex: 'contactsName', slotName: 'contactsName', width: 100 },
      { title: '提醒时间', dataIndex: 'warningTime', width: 170 },
      { title: '操作', dataIndex: 'operate', slotName: 'operate', width: 100 },
    ],
  })
  const onhandle = (status, record) => {
    // <!-- 业务类型，保养1，维修2，年检3 -->
    if (status === 1) {
      navigateTo(`/car-maintenance/detail/${record.refId}?status=2&activeType=2`, `保养详情`)
    } else if (status === 2) {
      navigateTo(`/car-repair/detail/${record.refId}?activeType=${2}&status=2`, `费用信息`)
    } else if (status === 3) {
      navigateTo(`/car-inspect/detail/${record.refId}?activeType=${2}&inspectionStatus=${1}&produceWay=${10}`, `费用信息`)
    } else if (status == 4) {
      navigateTo('/finance/reconciliation/maintenance-fee?refCode=' + record.refCode)
    } else if (status == 5) {
      // 对账管理 - 车辆购置费对账
      navigateTo(`/finance/reconciliation/car-purchase?activeType=${2}&businesCode=${record.refCode}`)
    } else if (status == 6) {
      navigateTo(`/car-manage/detail/${record.refId}?tab=8`, `车辆详情`)
    }
  }
  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParam, getSupplierLillList)
  // modal展示
  const visible = ref(false)
  let pageTlt = ref('')
  const open = (label) => {
    pageTlt = label
    visible.value = true
    loadData(1)
  }
  const onClose = () => {
    visible.value = false
    queryParam.supplierId = ''
    queryParam.refCode = ''
  }
  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .gysfytips-wrap {
    position: relative;
  }
  .car-msg {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .car-msg-left {
    margin-right: 10px;
  }
  .col-lic {
    color: #1d2129;
    font-size: 14px;
    font-weight: 600;
    margin-right: 16px;
  }
  .operate-button {
    width: 56px;
    display: inline-flex;
    align-items: center;
    line-height: 1.5715;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.1s cubic-bezier(0, 0, 1, 1);
    user-select: none;
    height: 32px;
    font-size: 14px;
    border-radius: var(--border-radius-small);
    color: rgb(var(--primary-6));
  }
</style>
